@page "/menu"
@using BootBlazor.Servers.Auth
@using BootBlazor.Servers.Helper
@using BootBlazor.Servers.Data
@using BootBlazor.Servers.Services

@rendermode RenderMode.InteractiveServer
@attribute [StreamRendering]

<div class="d-flex flex-column" style="height:100%;">
    <PageHeader Title="@Loc["MenuPage_Title"]" UseGrid="false">
        @if (_accessService.CheckHasElementRights("MenuAddBtn").Result)
        {
            <MudIconButton Class=" mr-2" Color="Color.Primary" Icon="@Icons.Material.Filled.Add" Variant="Variant.Outlined"
                           OnClick="AddMenuClick" Size="Size.Medium"></MudIconButton>
        }
        @if (_accessService.CheckHasElementRights("MenuDeleteBtn").Result)
        {
            <MudIconButton Class=" mr-2" Color="Color.Primary" Icon="@Icons.Material.Filled.Delete" Variant="Variant.Outlined"
                           OnClick="DeleteMenuClick" Size="Size.Medium" Disabled="SelectedMenuItem == null"></MudIconButton>
        }
    </PageHeader>
    <MudPaper class="flex-1 d-flex " style="overflow:auto;">

        <div class="flex-0 pt-2" style="width:340px;overflow:auto;">
            @if (ReRenderFlg)
            {
                <MudTreeView Items="@MenuItems" Hover="true" T="MenuItem" SelectedValue="SelectedMenuItem"
                             SelectedValueChanged="SelectedMenuChanged">
                    <ItemTemplate>
                        <MudTreeViewItem @bind-Expanded="@context.Expanded" Items="@context.Children" Value="@context.Value">
                            <Content>
                                <MudTreeViewItemToggleButton @bind-Expanded="@context.Expanded" Visible="context.HasChildren" />
                                @if (context.Value!.MenuType == 1)
                                {
                                    <MudIcon Icon="@context.Value.Icon" Class="mr-2"></MudIcon>
                                }
                                else
                                {
                                    <MudIcon Icon="@Icons.Material.Outlined.Square" Class="mr-2"></MudIcon>

                                }
                                <MudText Typo="Typo.subtitle2" Style="user-select:none;">@context.Value.MenuName</MudText>
                                <div class="identify" style="display:none;">@context.Value.Id</div>
                                <MudSpacer />
                                @if (_accessService.CheckHasElementRights("MenuOrderBtn").Result)
                                {
                                    <MudIcon Icon="@Icons.Material.Filled.DragHandle" Class="draghandle cursor-grabbing" />
                                }
                            </Content>
                        </MudTreeViewItem>
                    </ItemTemplate>
                </MudTreeView>
            }
        </div>
        <MudDivider Vertical="true" Class="" />
        <div class="flex-1 mx-2">

            @if (EditVisible)
            {
                <div class="pa-4">
                    <EditForm Model="MenuEditModel" OnValidSubmit="EditSubmit" style="width:100%;">
                        <DataAnnotationsValidator />
                        @if (MenuEditModel.Type == 1)
                        {
                            <MudField Class="my-4" Variant="Variant.Outlined" Margin="Margin.Dense" Label="@Loc["MenuPage_IconSelectLabel"]">
                                <IconSelect @bind-SelectedIcon="MenuEditModel.Icon" />
                            </MudField>
                        }
                        <MenuTreeSelect @bind-SelectedValue="MenuEditModel.ParentId" />
                        <MudTextField Class="mt-4" @bind-Value="MenuEditModel.Name" Variant="Variant.Outlined" Margin="Margin.Dense"
                                      Placeholder="@Loc["MenuPage_MenuNamePlaceHolder"]" For="@(() => MenuEditModel.Name)"
                                      UserAttributes="InputAttributes" Label="@Loc["MenuPage_MenuNameLablel"]"></MudTextField>
                        <MudRadioGroup @bind-Value="MenuEditModel.Type" T="int">
                            <MudRadio T="int" Value="1" Color="Color.Primary" Size="Size.Small">@Loc["MenuPage_MenuTypeRadioText1"]</MudRadio>
                            <MudRadio T="int" Value="2" Color="Color.Primary" Size="Size.Small">@Loc["MenuPage_MenuTypeRadioText2"]</MudRadio>
                        </MudRadioGroup>
                        @if (MenuEditModel.Type == 1)
                        {
                            <MudTextField Class="mt-4" @bind-Value="MenuEditModel.Route" Variant="Variant.Outlined" Margin="Margin.Dense"
                                          Placeholder="@Loc["MenuPage_MenuRoutePlaceHolder"]" For="@(() => MenuEditModel.Route)" Label="@Loc["MenuPage_MenuRouteLabel"]"
                                          UserAttributes="InputAttributes"></MudTextField>
                        }
                        else
                        {
                            <MudTextField Class="mt-4" @bind-Value="MenuEditModel.Identify" Variant="Variant.Outlined" Margin="Margin.Dense"
                                          Placeholder="@Loc["MenuPage_MenuIdentityPlaceHolder"]" For="@(() => MenuEditModel.Identify)" Label="@Loc["MenuPage_MenuIdentityLabel"]"
                                          UserAttributes="InputAttributes"></MudTextField>
                        }

                        <div class="d-flex mt-4">
                            <MudSpacer />
                            <MudButton Variant="Variant.Filled" Color="Color.Default" Class="mr-4"
                                       ButtonType="ButtonType.Button" StartIcon="@Icons.Material.Filled.Cancel" OnClick="CancelClick">@Loc["MenuPage_CancelButtonText"]</MudButton>
                            <MudButton Variant="Variant.Filled" Color="Color.Primary"
                                       ButtonType="ButtonType.Submit" StartIcon="@Icons.Material.Filled.Upload">@Loc["MenuPage_SubmitButtonText"]</MudButton>
                        </div>
                    </EditForm>
                </div>
            }
        </div>
    </MudPaper>

</div>

